<template>
	<view class="notice-main">
		<swiper class="notice-swiper" :style="'height:'+height+'rpx;line-height:'+height+'rpx;'" autoplay="true"
			:interval="interval" duration="1000" circular="true" :vertical="type==1?true:false">
			<swiper-item v-for="(list,index) in dataList" :key="index" @click.stop="clickList(list)">
				<view class="notice-swiper-item" :style="'font-size:'+fontSize+'rpx;color:'+color">
					{{list.title}}
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			//通知列表
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			},
			//滚动类型(1:向上循环滚动;2:横向滚动)
			type: {
				type: Number,
				default: 1
			},
			//滚动时间间隔
			interval: {
				type: Number,
				default: 3000
			},
			//通告栏高度(rpx)
			height: {
				type: Number,
				default: 66
			},
			//字体大小(rpx)
			fontSize: {
				type: Number,
				default: 24
			},
			//字体颜色
			color: {
				type: String,
				default: '#333333'
			},
		},
		data() {
			return {

			};
		},
		methods: {
			clickList(item) {
				this.$emit("click", item)
			}
		}
	}
</script>

<style scoped>
	.notice-main {
		width: 100%;
	}

	.notice-swiper-item {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
</style>